<template>
  <div>
    <puplic-modal
      width="1200px"
      :footer="false"
      :title="title"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="handleOk"
    >
      <div slot="content">
        <div class="content-wrap">
          <div class="title">{{ detector.restaurantId_dictText || '暂无' }} - {{ ' ' + detector.name }}</div>
          <!-- 弹窗 信息展示 -->
          <div class="device-wrap flex justify-between">
            <div class="device-wrap-common cursor" @click="showTargetInfo(1)">
              <img src="@/assets/imgs/device/1monitor.png" alt="" />
              监测仪信息
              <img src="@/assets/imgs/device/success.png" alt="" />
            </div>

            <div
              class="device-wrap-common"
              @click="showTargetInfo(2)"
              :class="detector.purifyInfoStatus == 1 ? 'cursor' : ''"
            >
              <img src="@/assets/imgs/device/2purifier.png" alt="" />
              净化器信息
              <img src="@/assets/imgs/device/success.png" alt="" v-if="detector.purifyInfoStatus == 1" />
            </div>

            <div
              class="device-wrap-common"
              @click="showTargetInfo(3)"
              :class="detector.fanInfoStatus == 1 ? 'cursor' : ''"
            >
              <img src="@/assets/imgs/device/3exhaust.png" alt="" />
              排风机信息
              <img src="@/assets/imgs/device/success.png" alt="" v-if="detector.fanInfoStatus == 1" />
            </div>

            <div
              class="device-wrap-common"
              @click="showTargetInfo(4)"
              :class="detector.smokeInfoStatus == 1 ? 'cursor' : ''"
            >
              <img src="@/assets/imgs/device/4chimney.png" alt="" />
              烟道信息
              <img src="@/assets/imgs/device/success.png" alt="" v-if="detector.smokeInfoStatus == 1" />
            </div>
          </div>

          <div class="detail-info">
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">所属餐厅：</div>
                <div class="detail-info-value">{{ detector.restaurantId_dictText || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">所属街道：</div>
                <div class="detail-info-value">{{ detector.regionId_dictText || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">监管单位：</div>
                <div class="detail-info-value">{{ detector.unitId_dictText || '暂无' }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅规模：</div>
                <div class="detail-info-value">
                  {{ restaurantDatail.scale == 1 ? '小型' : restaurantDatail.sacle == 2 ? '中型' : '大型' || '暂无' }}
                </div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅负责人：</div>
                <div class="detail-info-value">{{ restaurantDatail.chargeName || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">负责人电话：</div>
                <div class="detail-info-value">{{ restaurantDatail.chargePhone || '暂无' }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">清洗周期：</div>
                <div class="detail-info-value">{{ restaurantDatail.cleanCycle + ' 天' || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">最近一次清洗时间：</div>
                <div class="detail-info-value">{{ restaurantDatail.cleanTime || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">清洗倒计时：</div>
                <!-- <div class="detail-info-value">{{ restaurantDatail.expireDay || '暂无' }}天</div> -->
                <div class="detail-info-value" v-if="restaurantDatail.expireDay > 0">
                  {{ restaurantDatail.expireDay }}天
                </div>
                <div class="detail-info-value" v-else style="color: #ff517b">
                  逾期{{ restaurantDatail.expireDay * -1 }}天
                </div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">营业地址：</div>
                <div class="detail-info-value">{{ restaurantDatail.detailAddress || '暂无' }}</div>
              </div>
            </div>
          </div>

          <div class="cus-tabs flex">
            <div class="f1" :class="tabsFlag == true ? 'active-tab' : 'none'" @click="tabsFlag = true">实时数据</div>
            <div class="f1" :class="tabsFlag == false ? 'active-tab' : 'none'" @click="tabsFlag = false">历史数据</div>
          </div>

          <!-- 实时数据 -->
          <div class="real-time-data" v-if="tabsFlag == true">
            <e-charts :options="realTimeLineData" className="realTimeLineData" class="realTimeLineData"></e-charts>

            <div class="real-time-data-info flex">
              <div class="real-time-data-info-common">
                <img src="@/assets/imgs/device/5lampblack.png" alt="" />
                <div class="left">
                  <div class="name">油烟浓度mg/m³</div>
                  <div class="num">{{ tenMinutesAverageValue.avgThickSmoke }}</div>
                  <div class="context">(10分钟平均值)</div>
                </div>
              </div>
              <div class="real-time-data-info-common">
                <img src="@/assets/imgs/device/6pm.png" alt="" />
                <div class="left">
                  <div class="name">颗粒物浓度mg/m³</div>
                  <div class="num">{{ tenMinutesAverageValue.avgParticleHaze }}</div>
                  <div class="context">(10分钟平均值)</div>
                </div>
              </div>
              <div class="real-time-data-info-common">
                <img src="@/assets/imgs/device/7nmhc.png" alt="" />
                <div class="left">
                  <div class="name">非甲烷总烃浓度mg/m³</div>
                  <div class="num">{{ tenMinutesAverageValue.avgNonMethane }}</div>
                  <div class="context">(10分钟平均值)</div>
                </div>
              </div>
            </div>

            <div class="real-time-data-info2 flex align-center justify-around">
              <div class="real-time-data-info-common2">
                <div>监测仪状态</div>
                <div class="flex align-center">
                  <img src="@/assets/imgs/device/1monitor.png" alt="" />
                  <span :class="detector.monitorStatus == 1 ? '' : 'offline'">
                    {{ detector.monitorStatus == 1 ? '在线' : '离线' }}
                  </span>
                </div>
              </div>
              <div class="real-time-data-info-common2">
                <div>净化器状态</div>
                <div class="flex align-center">
                  <img src="@/assets/imgs/device/2purifier.png" alt="" />
                  <span :class="detector.purifyStatus == 1 ? '' : 'offline'">
                    {{ detector.purifyStatus == 1 ? '在线' : '离线' }}
                  </span>
                </div>
              </div>
              <div class="real-time-data-info-common2">
                <div>排风机状态</div>
                <div class="flex align-center">
                  <img src="@/assets/imgs/device/3exhaust.png" alt="" />
                  <span :class="detector.fanStatus == 1 ? '' : 'offline'">
                    {{ detector.fanStatus == 1 ? '在线' : '离线' }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 历史数据 -->
          <div class="history-time-data" v-if="tabsFlag == false">
            <div class="search-group" style="background: #024c4e">
              <div class="input-wrap">
                <div class="label">选择时间:</div>
                <div class="input-item">
                  <a-date-picker
                    v-model="value"
                    :disabled-date="disabledDate"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :allowClear="false"
                    @change="datachange"
                  />
                </div>
              </div>
            </div>
            <e-charts :options="historyTimeData" className="historyTimeData" class="historyTimeData"></e-charts>

            <div class="history-time-data-info flex">
              <div class="history-time-data-info-common f1 flex column justify-between">
                <div class="name">
                  油烟浓度：
                  <span>mg/m³</span>
                </div>
                <div class="info flex">
                  <img src="@/assets/imgs/device/5lampblack.png" alt="" />
                  <!-- <div class="context-wrap">
                <div class="num">{{ dayAverageValue.avgThickSmoke }}</div>
                <div class="remind">(当日平均值)</div>
              </div> -->
                  <div class="context-wrap">
                    <div class="num">{{ dayAverageValue.maxThickSmoke }}</div>
                    <div class="remind">(当日峰值)</div>
                  </div>
                </div>
              </div>
              <div class="history-time-data-info-common f1 flex column justify-between">
                <div class="name">
                  颗粒度浓度：
                  <span>mg/m³</span>
                </div>
                <div class="info flex">
                  <img src="@/assets/imgs/device/6pm.png" alt="" />
                  <!-- <div class="context-wrap">
                <div class="num">{{ dayAverageValue.avgParticleHaze }}</div>
                <div class="remind">(当日平均值)</div>
              </div> -->
                  <div class="context-wrap">
                    <div class="num">{{ dayAverageValue.maxParticleHaze }}</div>
                    <div class="remind">(当日峰值)</div>
                  </div>
                </div>
              </div>
              <div class="history-time-data-info-common f1 flex column justify-between">
                <div class="name">
                  非甲烷总烃浓度 :
                  <span>mg/m³</span>
                </div>
                <div class="info flex">
                  <img src="@/assets/imgs/device/7nmhc.png" alt="" />
                  <!-- <div class="context-wrap">
                <div class="num">{{ dayAverageValue.avgNonMethane }}</div>
                <div class="remind">(当日平均值)</div>
              </div> -->
                  <div class="context-wrap">
                    <div class="num">{{ dayAverageValue.maxNonMethane }}</div>
                    <div class="remind">(当日峰值)</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="history-time-data-info2 flex">
              <div class="history-time-data-info-common2 f1 flex align-center">
                <img src="@/assets/imgs/device/8earlyWarning.png" alt="" />
                <div class="context flex column justify-between">
                  <div class="remind">预警次数(次)</div>
                  <div class="num">{{ warmingTimeCount.earlyWarningCount }}</div>
                  <div class="remind">预警累计时长(m)</div>
                  <div class="num">{{ (warmingTimeCount.earlyWarningTime / 60).toFixed(0) }}</div>
                </div>
                <div class="flex column cus-btn align-self-stat cursor">
                  <span @click="showInfoDetail(1)">查看详情></span>
                </div>
              </div>
              <div class="history-time-data-info-common2 f1 flex align-center">
                <img src="@/assets/imgs/device/9warning.png" alt="" />
                <div class="context flex column justify-between">
                  <div class="remind">告警次数(次)</div>
                  <div class="num" style="color: #d95682">{{ warmingTimeCount.giveAnAlarmCount }}</div>
                  <div class="remind">告警累计时长(m)</div>
                  <div class="num" style="color: #d95682">{{ (warmingTimeCount.giveAnAlarmTime / 60).toFixed(0) }}</div>
                </div>
                <div class="flex column cus-btn align-self-stat cursor">
                  <span @click="showInfoDetail(2)">查看详情></span>
                </div>
              </div>
              <div class="history-time-data-info-common2 f1 flex align-center">
                <img src="@/assets/imgs/device/10offline.png" alt="" />
                <div class="context flex column justify-between">
                  <div class="remind">离线次数(次)</div>
                  <div class="num" style="color: #04d7db">{{ warmingTimeCount.offLineCount }}</div>
                  <div class="remind">离线累计时长(m)</div>
                  <div class="num" style="color: #04d7db">{{ (warmingTimeCount.offLineTime / 60).toFixed(0) }}</div>
                </div>
                <div class="flex column cus-btn align-self-stat cursor">
                  <span @click="showInfoDetail(3)">查看详情></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </puplic-modal>
    <device-detail ref="deviceDetail"></device-detail>
    <info-detail ref="infoDetail"></info-detail>
  </div>
</template>
<script>
import { comMethods } from '@/mixins/comMethods'
import puplicModal from '@/components/publicModal'
import topTitle from '@/components/topTitle'
import eCharts from '@/components/eCharts'
import { getAction } from '@/api/manage'
import { realTimeLineData, historyTimeData } from './echartsData'
import deviceDetail from './deviceDetail'
import infoDetail from './infoDetail'
export default {
  mixins: [comMethods],
  components: { puplicModal, topTitle, eCharts, deviceDetail, infoDetail },
  name: 'informationIssue-detailModal',
  data() {
    return {
      publicVisible: false,
      records: {},
      title: '设备管理-设备组详情页',
      value: '',
      tabsFlag: true,
      // content: [['设备管理'], ['设备组详情页']],
      detector: {}, // 从上个页面传来的检测仪信息
      restaurantDatail: {}, // 查询到的餐馆详情
      realTimeLineData: {}, // 实时echarts 对象
      tenMinutesAverageValue: {}, // 10分钟内平均值数据
      historyTimeData: {}, // 一天历史数据
      dayAverageValue: {}, // 一天平均值数据
      warmingTimeCount: {}, // 报警告警离线时间统计
    }
  },

  methods: {
    show(records) {
      // console.log(records, 'records')
      this.publicVisible = true
      this.detector = records
      this.initData()
      this.timeId = setInterval(() => {
        this.realTimeHeartbeatData()
      }, 10000)
      this.value = this.$moment().subtract(1, 'day').format('YYYY-MM-DD')
      this.datachange()
      // this.title = records.noticeType_dictText || '暂无'
    },

    initData() {
      this.getRestaruantInfo()
      this.realTimeHeartbeatData()
    },

    async getRestaruantInfo() {
      let { result } = await getAction('/restaurant/detail', { restaurantId: this.detector.restaurantId })
      this.restaurantDatail = result
      this.restaurantDatail.cleanTime = this.restaurantDatail.cleanTime.split(' ')[0]
    },

    showTargetInfo(type) {
      if (type == 2 && this.detector.purifyInfoStatus != 1) return
      if (type == 3 && this.detector.fanInfoStatus != 1) return
      if (type == 4 && this.detector.smokeInfoStatus != 1) return

      console.log(this.detector, 'this.detector')
      this.$refs.deviceDetail.show(this.detector, type)
    },

    async realTimeHeartbeatData() {
      let startDate = this.$moment().startOf('day').valueOf()
      let endDate = this.$moment().valueOf()
      let tenMinutesAgo = this.$moment().subtract(10, 'minutes').valueOf()
      let data = {
        monitorMn: this.detector.monitorMn,
        startDate,
        endDate,
      }
      // echarts 数据
      let { result } = await getAction('/device/data/find_heartbeat_data', data)
      this.realTimeLineData = realTimeLineData(result)

      let data2 = {
        monitorMn: this.detector.monitorMn,
        startDate: tenMinutesAgo,
        endDate,
      }
      // 平均值数据
      let res = await getAction('/device/data/find_device_data', data2)
      this.tenMinutesAverageValue = res.result[0]
      this.tenMinutesAverageValue.avgThickSmoke = this.tenMinutesAverageValue.avgThickSmoke.toFixed(2)
      this.tenMinutesAverageValue.avgParticleHaze = this.tenMinutesAverageValue.avgParticleHaze.toFixed(2)
      this.tenMinutesAverageValue.avgNonMethane = this.tenMinutesAverageValue.avgNonMethane.toFixed(2)
    },

    disabledDate(current) {
      let moment = this.$moment().subtract(1, 'day').valueOf()
      return current > moment
    },

    async datachange() {
      let startDate = this.$moment(`${this.value + ' 00:00:00'}`).valueOf()
      let endDate = this.$moment(`${this.value + ' 23:59:59'}`).valueOf()

      let data = {
        monitorMn: this.detector.monitorMn,
        startDate,
        endDate,
      }

      let { result } = await getAction('/device/data/find_heartbeat_data', data)
      this.historyTimeData = historyTimeData(result)

      let res = await getAction('/device/data/find_device_data', data)
      this.dayAverageValue = res.result[0]

      data.deviceId = this.detector.id
      let resA = await getAction('/device/event_record/find_device_data', data)
      this.warmingTimeCount = resA.result
    },

    showInfoDetail(type) {
      // infoDetail
      // 1 预警 2 告警 3 离线
      this.$refs.infoDetail.show(this.detector, type, this.value)
    },

    handleOk() {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 0 0;
}
.content-wrap {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  background: #024c4e;
  padding: 40px 50px;

  .title {
    font-size: 18px;
    font-weight: 400;
    color: #00f8ff;
  }

  .device-wrap-common {
    flex: 1;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 4px;
    background: #025356;
    margin: 12px 0 22px 0;
    margin-right: 32px;
    font-size: 14px;
    font-weight: 400;
    color: #06d6db;
    &:nth-child(5) {
      margin-right: 0;
    }
  }

  .detail-info {
    border-bottom: 3px solid #036265;
  }

  .detail-info-common {
    font-size: 14px;
    font-weight: 400;
    color: #02c1c7;
    margin-bottom: 20px;
    .detail-info-value {
      color: #9cfdff;
      margin-left: 5px;
    }
  }

  .cus-tabs {
    margin-top: 20px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    background: #05585a;
    border: 1px solid #036265;
    font-size: 16px;
    font-weight: 500;
    color: #06d6db;
    cursor: pointer;

    .active-tab {
      color: #023234;
      font-weight: bold;
      background: #00f8ff;
      border: 1px solid #00f8ff;
    }
  }

  .realTimeLineData {
    height: 350px;
  }

  .real-time-data {
    .real-time-data-info-common {
      margin: 30px 0 20px 0;
      flex: 1;
      display: flex;
      align-items: center;
      height: 93px;
      padding: 16px 35px;
      background: #03585b;
      border-radius: 8px;
      border: 1px solid #036265;
      .left {
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 14px;
          font-weight: 400;
          color: #02c1c7;
        }
        .num {
          font-size: 20px;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #00fe9f;
        }
        .context {
          font-size: 12px;
          font-weight: 400;
          color: #03878b;
        }
      }
      &:nth-child(2) {
        margin: 30px 24px 20px 24px;
      }
    }

    .real-time-data-info2 {
      margin-bottom: 60px;
      height: 80px;
      border-radius: 8px;
      background: #03585b;
      border: 1px solid #036265;

      .real-time-data-info-common2 {
        font-size: 14px;
        font-weight: 400;
        color: #06d6db;
        span {
          background: #00fe9f;
          border-radius: 12px;
          padding: 0 5px;
          font-size: 12px;
          font-weight: 500;
          color: #05585a;
          margin-left: 5px;
        }
        .offline {
          color: #05585a;
          background: #06d6db;
        }
      }
    }
  }

  .history-time-data {
    .history-time-data-info-common {
      margin: 20px 0;
      height: 120px;
      border-radius: 8px;
      background: #03585b;
      border: 1px solid #036265;
      &:nth-child(2) {
        margin: 20px 30px;
      }
      padding: 16px 20px;
      font-size: 16px;
      font-weight: 400;
      color: #02c1c7;
      .info {
        .context-wrap {
          padding: 0 25px;
          &:nth-child(3) {
            border-left: 1px solid #036265;
          }
          .num {
            font-size: 20px;
            font-family: DIN-Medium, DIN;
            font-weight: 500;
            color: #00fe9f;
          }
          .remind {
            font-size: 12px;
            font-weight: 400;
            color: #03878b;
          }
        }
      }
    }

    .history-time-data-info-common2 {
      margin-bottom: 60px;
      height: 160px;
      border-radius: 8px;
      background: #03585b;
      border: 1px solid #036265;
      padding: 24px 18px;
      &:nth-child(2) {
        margin-left: 30px;
        margin-right: 30px;
      }

      .context {
        margin: 0 20px;
        .remind {
          font-size: 14px;
          font-weight: 400;
          color: #02c1c7;
        }
        .num {
          font-size: 22px;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #deef35;
        }
      }

      .cus-btn > span {
        font-size: 14px;
        font-weight: 400;
        color: #00fe9f;
      }
    }
  }
}
</style>
